<template>
	<view class="container">
		<!-- 成功提示 -->
		<view class="success-section">
			<view class="success-icon"><text class="checkmark">✓</text></view>
			<text class="success-text">添加成功</text>
		</view>

		<!-- 数据卡片 -->
		<view class="data-card">
			<view class="data-main">
				<view class="info-row">
					<view class="lipid-data">
						<text class="value">总胆固醇：{{ lipid.tc }}</text>
						<text class="unit">mmol/L</text>
					</view>
					<view class="lipid-data">
						<text class="value">甘油三酯：{{ lipid.tg }}</text>
						<text class="unit">mmol/L</text>
					</view>
				</view>
				<view class="info-row">
					<view class="lipid-data">
						<text class="value">高密度脂蛋白：{{ lipid.hdl }}</text>
						<text class="unit">mmol/L</text>
					</view>
				</view>
				<view class="info-row">
					<view class="lipid-data">
						<text class="value">低密度脂蛋白：{{ lipid.ldl }}</text>
						<text class="unit">mmol/L</text>
					</view>
				</view>
				<view class="info-row">
					<text>测量时间：{{ lipid.measuredTime }}</text>
				</view>
				<view class="info-row"><text class="upload-time">上传时间：{{ lipid.measuredTime }}</text></view>
			</view>
			<view class="status-tag" :style="{background: lipid.color}">{{ lipid.tag }}</view>
		</view>

		<!-- 对比数据 -->
		<view class="comparison-section" v-if="comparisonData">
			<!-- 总胆固醇对比 -->
			<view class="comparison-group">
				<view class="group-title">总胆固醇</view>
				<view class="comparison-row">
					<view class="comparison-item">
						<view class="comparison-icon" :class="comparisonData.tenDaysTcFlag === '0' ? 'down' : 'up'">
							<text>{{ comparisonData.tenDaysTcFlag === '0' ? '▼' : '▲' }}</text>
						</view>
						<view class="comparison-content">
							<text class="comparison-value" :class="comparisonData.tenDaysTcFlag === '0' ? 'down' : 'up'">
								{{ comparisonData.lastTcDiff }}mmol/L
							</text>
							<text class="comparison-label">比上次({{ comparisonData.lastDate }})</text>
						</view>
					</view>
					<view class="comparison-item" v-if="comparisonData.tenDaysTcDiff !== '-'">
						<view class="comparison-icon" :class="comparisonData.tenDaysTcFlag === '0' ? 'down' : 'up'">
							<text>{{ comparisonData.tenDaysTcFlag === '0' ? '▼' : '▲' }}</text>
						</view>
						<view class="comparison-content">
							<text class="comparison-value" :class="comparisonData.tenDaysTcFlag === '0' ? 'down' : 'up'">
								{{ comparisonData.tenDaysTcDiff }}mmol/L
							</text>
							<text class="comparison-label">比{{comparisonData.betweenDay}}天前({{ comparisonData.tenDaysTotalCholesterolDate }})</text>
						</view>
					</view>
					<!-- <view class="comparison-item" v-else>
						<view class="comparison-content">
							<text class="comparison-label">暂无对比数据</text>
						</view>
					</view> -->
				</view>
			</view>
			
			<!-- 甘油三酯对比 -->
			<view class="comparison-group">
				<view class="group-title">甘油三酯</view>
				<view class="comparison-row">
					<view class="comparison-item">
						<view class="comparison-icon" :class="comparisonData.tenDaysTgFlag === '0' ? 'down' : 'up'">
							<text>{{ comparisonData.tenDaysTgFlag === '0' ? '▼' : '▲' }}</text>
						</view>
						<view class="comparison-content">
							<text class="comparison-value" :class="comparisonData.tenDaysTgFlag === '0' ? 'down' : 'up'">
								{{ comparisonData.lastTgDiff }}mmol/L
							</text>
							<text class="comparison-label">比上次({{ comparisonData.lastDate }})</text>
						</view>
					</view>
					<view class="comparison-item" v-if="comparisonData.tenDaysTgDiff !== '-'">
						<view class="comparison-icon" :class="comparisonData.tenDaysTgFlag === '0' ? 'down' : 'up'">
							<text>{{ comparisonData.tenDaysTgFlag === '0' ? '▼' : '▲' }}</text>
						</view>
						<view class="comparison-content">
							<text class="comparison-value" :class="comparisonData.tenDaysTgFlag === '0' ? 'down' : 'up'">
								{{ comparisonData.tenDaysTgDiff }}mmol/L
							</text>
							<text class="comparison-label">比{{comparisonData.betweenDay}}天前({{ comparisonData.tenDaysTriglyceridesDate }})</text>
						</view>
					</view>
					<!-- <view class="comparison-item" v-else>
						<view class="comparison-content">
							<text class="comparison-label">暂无对比数据</text>
						</view>
					</view> -->
				</view>
			</view>

			<!-- 高密度脂蛋白对比 -->
			<view class="comparison-group">
				<view class="group-title">高密度脂蛋白</view>
				<view class="comparison-row">
					<view class="comparison-item">
						<view class="comparison-icon" :class="comparisonData.lastHdlFlag === '0' ? 'down' : 'up'">
							<text>{{ comparisonData.lastHdlFlag === '0' ? '▼' : '▲' }}</text>
						</view>
						<view class="comparison-content">
							<text class="comparison-value" :class="comparisonData.lastHdlFlag === '0' ? 'down' : 'up'">
								{{ comparisonData.lastHdlDiff }}mmol/L
							</text>
							<text class="comparison-label">比上次({{ comparisonData.lastDate }})</text>
						</view>
					</view>
					<view class="comparison-item" v-if="comparisonData.tenDaysHdlDiff !== '-'">
						<view class="comparison-icon" :class="comparisonData.tenDaysHdlFlag === '0' ? 'down' : 'up'">
							<text>{{ comparisonData.tenDaysHdlFlag === '0' ? '▼' : '▲' }}</text>
						</view>
						<view class="comparison-content">
							<text class="comparison-value" :class="comparisonData.tenDaysHdlFlag === '0' ? 'down' : 'up'">
								{{ comparisonData.tenDaysHdlDiff }}mmol/L
							</text>
							<text class="comparison-label">比{{comparisonData.betweenDay}}天前({{ comparisonData.tenDaysHdlDate }})</text>
						</view>
					</view>
					<!-- <view class="comparison-item" v-else>
						<view class="comparison-content">
							<text class="comparison-label">暂无对比数据</text>
						</view>
					</view> -->
				</view>
			</view>

			<!-- 低密度脂蛋白对比 -->
			<view class="comparison-group">
				<view class="group-title">低密度脂蛋白</view>
				<view class="comparison-row">
					<view class="comparison-item">
						<view class="comparison-icon" :class="comparisonData.lastLdlFlag === '0' ? 'down' : 'up'">
							<text>{{ comparisonData.lastLdlFlag === '0' ? '▼' : '▲' }}</text>
						</view>
						<view class="comparison-content">
							<text class="comparison-value" :class="comparisonData.lastLdlFlag === '0' ? 'down' : 'up'">
								{{ comparisonData.lastLdlDiff }}mmol/L
							</text>
							<text class="comparison-label">比上次({{ comparisonData.lastDate }})</text>
						</view>
					</view>
					<view class="comparison-item" v-if="comparisonData.tenDaysLdlDiff !== '-'">
						<view class="comparison-icon" :class="comparisonData.tenDaysLdlFlag === '0' ? 'down' : 'up'">
							<text>{{ comparisonData.tenDaysLdlFlag === '0' ? '▼' : '▲' }}</text>
						</view>
						<view class="comparison-content">
							<text class="comparison-value" :class="comparisonData.tenDaysLdlFlag === '0' ? 'down' : 'up'">
								{{ comparisonData.tenDaysLdlDiff }}mmol/L
							</text>
							<text class="comparison-label">比{{comparisonData.betweenDay}}天前({{ comparisonData.tenDaysLdlDate }})</text>
						</view>
					</view>
					<!-- <view class="comparison-item" v-else>
						<view class="comparison-content">
							<text class="comparison-label">暂无对比数据</text>
						</view>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBloodLipid,
		queryDateCompareBL
	} from '@/api/healthData/everyBloodLipid.js'
	export default {
		data() {
			return {
				lipidData: {},
				comparisonData: {},
				lipidId: '',
				lipid: {}
			}
		},
		onLoad(options) {
			if (options.totalCholesterol) this.lipidData.totalCholesterol = decodeURIComponent(options.totalCholesterol)
			if (options.triglycerides) this.lipidData.triglycerides = decodeURIComponent(options.triglycerides)
			if (options.hdl) this.lipidData.hdl = decodeURIComponent(options.hdl)
			if (options.ldl) this.lipidData.ldl = decodeURIComponent(options.ldl)
			if (options.measuredTime) this.lipidData.measuredTime = decodeURIComponent(options.measuredTime)
			if (options.measuredTypeName) this.lipidData.measuredTypeName = decodeURIComponent(options.measuredTypeName)
			if (options.id) {
				this.lipidId = options.id;
				this.getLipid();
				this.queryCompare()
			}
		},
		methods: {
			getLipid() {
				getBloodLipid(this.lipidId).then(res => {
					this.lipid = res.data
				})
			},
			queryCompare() {
				queryDateCompareBL(this.lipidId).then(res => {
					this.comparisonData = res.data || {}
				})
			}
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #fff;
	}

	.success-section {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 0 40rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.success-icon {
		width: 120rpx;
		height: 120rpx;
		background-color: #4cd964;
		border-radius: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.checkmark {
		color: #fff;
		font-size: 60rpx;
		font-weight: bold;
	}

	.success-text {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.data-card {
		margin: 0 30rpx 24rpx;
		padding: 32rpx;
		background: #FBFBFD;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		position: relative;
	}

	.data-main {
		flex: 1;
		margin-right: 90rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
		font-size: 24rpx;
		color: #000;
		justify-content: space-between;
	}

	.lipid-data {
		display: flex;
		align-items: baseline;
		flex: 1;
	}

	.lipid-data:first-child {
		margin-right: 20rpx;
	}

	.lipid-data .value {
		font-size: 24rpx;
		font-weight: 600;
		color: #000;
	}

	.lipid-data .unit {
		font-size: 24rpx;
		color: #000;
		margin-left: 8rpx;
	}

	.method {
		min-width: 240rpx;
		text-align: right;
		font-size: 24rpx;
		color: #000;
	}

	.upload-time {
		color: #999;
		font-size: 20rpx;
	}

	.status-tag {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 26rpx;
		border-top-right-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		writing-mode: vertical-lr;
		letter-spacing: 4rpx;
		padding: 20rpx 0;
	}

	.comparison-section {
		background-color: #FBFBFD;
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 0 30rpx 20rpx;
	}

	.comparison-group {
		margin-bottom: 30rpx;
	}

	.comparison-group:last-child {
		margin-bottom: 0;
	}

	.group-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		margin-bottom: 20rpx;
	}

	.comparison-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.comparison-row::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 0;
		bottom: 0;
		width: 2rpx;
		background-color: #E0E0E0;
		transform: translateX(-50%);
	}

	.comparison-item {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 20rpx;
	}

	.comparison-icon {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		font-size: 24rpx;
		font-weight: bold;
	}

	.comparison-icon.down {
		background-color: #e8f7f1;
		color: #0BD45B;
	}

	.comparison-icon.up {
		background-color: #ffe8e8;
		color: #EC6666;
	}

	.comparison-content {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.comparison-value {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 8rpx;
	}

	.comparison-value.down {
		color: #0BD45B;
	}

	.comparison-value.up {
		color: #EC6666;
	}

	.comparison-label {
		font-size: 24rpx;
		color: #999;
		line-height: 1.2;
	}
</style>
